<template>
  <div class="skills-label" ref="fullScreen">
    <ts-header title="技能标签" back><span slot="right" @click="sava()">保存</span></ts-header>
    <flex-view>
      <div class="auto-scroll label-kinds">
        <section class="kinds-item" v-for="(type,index) in types" :key="index">
          <div class="kinds-title first-title">{{type}}</div>
          <div class="kinds-value">
            <label v-for="(auth,aIndex) in authLabel" v-if="auth.brands"
                   @click="openPopup($event,{class_id:auth.id,title:auth.title,brands:auth.brands},index)"
                   class="kinds-labels"
                   :class="{'label-active':isChecked(auth.id,index)}"
                   :key="aIndex">
              <img src="../../assets/imgs/icon/selected.png" class="icon"/>
              <span class="label-text">{{auth.title}}</span>
            </label>
          </div>
        </section>
      </div>
    </flex-view>
    <skills-popup v-model="visible" @close="brandsClose" @complete="brandsComplete"
                  :labels="brands"></skills-popup>
  </div>
</template>

<script>
  import {GET_PRODS_BRANDS} from '../../assets/js/api'
  import transfer from '../../core/transfer'

  export default {
    name: 'skillsLabel',
    components: {
      skillsPopup(resolve) {
        require(['../../components/module/BrandsPopup.vue'], resolve)
      }
    },
    data() {
      return {
        visible: false,
        types: ['保养', '维修', '安装'],
        authLabel: [],
        service_types: [
          {type_id: 1, classs: []},
          {type_id: 2, classs: []},
          {type_id: 3, classs: []}
        ],
        brands: {},
        checkedVal: [],
        tempTP: {
          class_id: null,
          class_index: null,
          index: null
        }
      }
    },
    activated() {
      const {skillsLabel} = this.$route.params;
      console.log(skillsLabel)
      if (skillsLabel.length>0&&skillsLabel!=='undefined') {
        this.service_types = skillsLabel;
      }
    },
    async created() {
      let json = await this.$http.get(GET_PRODS_BRANDS);
      if (json.result === 1) {
        this.authLabel = json.data;
      }
    },
    methods: {
      isChecked(class_id, index) {
          let obj = this.service_types[index].classs;
          for (let item of obj) {
            if (item.class_id === class_id) {
              return true;
            }
          }
        return false;
      },
      openPopup(evt, {class_id, title, brands}, index) {
          let classs = this.service_types[index].classs;
          if (!this.isChecked(class_id, index)) {
            classs.push({class_id, title});
            this.tempTP.class_index = classs.length - 1;
          } else {
            for (let i = 0; i < classs.length; i++) {
              if (classs[i].class_id === class_id) {
                this.tempTP.class_index = i;
                break;
              }
            }
          }
        if (class_id !== this.tempTP.class_id) {
          //提供给当前popup
          this.brands = brands;
          //临时存储当前选中产品id
          this.tempTP.class_id = class_id;
        }
        //临时存储当前类型索引
        this.tempTP.index = index;

        this.visible = true;
      },
      brandsComplete(val) {
        if (val.length > 0) {
          if(this.service_types.length!==0){
            let arr = this.service_types[this.tempTP.index].classs[this.tempTP.class_index];
            arr.brands = val;
          }
        } else {
          this.brandsClose([]);
        }
      },
      brandsClose(val) {
        if (val.length === 0) {
          if(this.service_types!==0){
            let classs = this.service_types[this.tempTP.index].classs;
            classs.splice(this.tempTP.class_index, 1);
          }
        }
      },
      sava() {
        transfer.$emit('checkComplete', this.service_types);
        this.$router.goBack();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/variables";
  @import "../../assets/css/mixin";

  .skills-label {
    min-height: 100vh;
    background-color: #ffffff;
  }

  .label-kinds {
    .kinds-item {
      .kinds-title {
        padding-left: .20rem;
        border-left: 2px solid #FAA12F;
        margin-top: .20rem;
        font-weight: 600;
        @include sc(.26rem, #020202);
        &.first-title {
          margin-top: .30rem;
        }
      }
      .kinds-value {
        padding: 0 .24rem .28rem;
        margin-left: -.20rem;
        .kinds-labels {
          display: inline-block;
          text-align: center;
          margin-left: .20rem;
          margin-top: .30rem;
          position: relative;
          @include wh(1.5456rem, 0.4925rem);
          border: 1px solid #A3A3A3;
          vertical-align: middle;
          .kinds-label-checkbox {
            display: none;
          }
          .icon {
            display: none;
            position: absolute;
            bottom: 0;
            right: -1px;
            @include wh(.28rem, .26rem);
          }
          .label-text {
            @include wot();
            position: relative;
            top: 50%;
            display: block;
            transform: translateY(-50%);
          }
          &.label-active {
            border: 1px solid #1D9DFF;
            & .icon {
              display: block;
            }
          }
          border-radius: 2px;
        }
      }
    }
  }
</style>
